<script setup>
import {onMounted, reactive} from "vue";
import anime from "animejs/lib/anime.es.js";

let bgCircleAnime, bgLeftAnime, bgRightAnime, loginFormAnime, registerFormAnime;
onMounted(() => {
  bgCircleAnime = anime({
    targets: '.bg-circle',
    left: '90vh',
    easing: 'easeInOutQuad',
    autoplay: false,
    complete() {
      bgCircleAnime.reverse();
    }
  })

  bgLeftAnime = anime({
    targets: '.body .left-text',
    left: '-100vw',
    easing: 'easeInOutQuad',
    autoplay: false,
    complete() {
      bgLeftAnime.reverse();
    }
  })

  bgRightAnime = anime({
    targets: '.body .right-text',
    right: '0',
    easing: 'easeInOutQuad',
    autoplay: false,
    complete() {
      bgRightAnime.reverse();
    }
  })

  loginFormAnime = anime({
    targets: '.body .login-input-box',
    opacity: 0,
    easing: 'linear',
    duration: 800,
    autoplay: false,
    complete() {
      loginFormAnime.reverse();
    }
  })

  registerFormAnime = anime({
    targets: '.body .register-input-box',
    opacity: 1,
    easing: 'linear',
    duration: 800,
    autoplay: false,
    complete() {
      registerFormAnime.reverse();
    }
  })
})

const swapPage = () => {
  bgCircleAnime.play();
  bgLeftAnime.play();
  bgRightAnime.play();
  loginFormAnime.play();
  registerFormAnime.play();
}


import IconUser from "@/components/icons/IconUser.vue";
import IconLock from "@/components/icons/IconLock.vue";
import IconEmail from "@/components/icons/IconEmail.vue";
const loginForm = reactive({
  username: '',
  password: '',
  code: ''
})
const registerForm = reactive({
  username: '',
  email: '',
  password: '',
  rePassword: '',
  code: ''
})



</script>

<template>
  <div class="body">
    <div class="bg-circle"></div>
    <div class="left-text">
      <div style="font-size: 20px; font-weight: bolder">新用户？</div>
      <div style="font-size: 14px; font-weight: bolder; margin-bottom: 0.5rem">嗨嗨嗨，好兄弟速来击剑🤺🤺🤺</div>
      <el-button type="primary" round @click="swapPage">
        <span style="min-width: 5rem; height: 1rem">注册</span>
      </el-button>

      <div class="img">
      </div>
    </div>
    <div class="login-input-box">
      <div class="content">
        <h1 style="font-weight: bold; margin-bottom: 1rem; text-align: center">欢迎登录</h1>
        <el-form size="large" :model="loginForm">
          <el-form-item>
            <el-input v-model="loginForm.username" placeholder="输入用户名">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <IconUser></IconUser>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="loginForm.password" type="password" placeholder="输入密码">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <IconLock></IconLock>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="margin:0 auto" type="primary" round>登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="right-text">
      <div style="font-size: 20px; font-weight: bolder">已有账号？</div>
      <div style="font-size: 14px; font-weight: bolder; margin-bottom: 0.5rem">嗨嗨嗨，好兄弟速来击剑🤺🤺🤺</div>
      <el-button type="primary" round @click="swapPage">
        <span style="min-width: 5rem; height: 1rem">登录</span>
      </el-button>

      <div class="img">
      </div>
    </div>

    <div class="register-input-box">
      <div class="content">
        <h1 style="font-weight: bold; margin-bottom: 1rem; text-align: center">欢迎注册</h1>
        <el-form size="large" :model="registerForm">
          <el-form-item>
            <el-input v-model="registerForm.username" placeholder="输入用户名">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <IconUser></IconUser>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="registerForm.email" placeholder="输入邮箱地址">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <IconEmail></IconEmail>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="registerForm.password" type="password" placeholder="输入密码">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <IconLock></IconLock>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="registerForm.rePassword" type="password" placeholder="重复密码">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <IconLock></IconLock>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="margin:0 auto" type="primary" round>注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped>
.body .register-input-box .content {
  width: 65%;
}
.body .register-input-box {
  width: 30rem;
  height: 100vh;
  position: absolute;
  left: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  z-index: 1;
}
.body .login-input-box .content {
  width: 65%;
}
.body .login-input-box {
  width: 30rem;
  height: 100vh;
  position: absolute;
  right: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.body .right-text .img {
  margin-left: 8rem;
  background: url("@/assets/register.png") no-repeat;
  background-size: cover;
  width: 40vw;
  height: 40vw;
}

.body .right-text {
  width: 55vw;
  padding-top: 3rem;
  text-align: center;
  color: #FFFFFF;
  text-stroke: 2px #000000;
  position: absolute;
  right: -100vw;
  z-index: 2;
}

.body .left-text .img {
  margin-left: 8rem;
  background: url("@/assets/login.png") no-repeat;
  background-size: cover;
  width: 40vw;
  height: 40vw;
}

.body .left-text .el-button,.body .right-text .el-button{
  background-color: #79bbff;
  border: #FFFFFF solid 2px;
  margin-top: 1rem;
}
.body .left-text .el-button:hover,.body .right-text .el-button:hover {
  background-color: #337ecc;
}

.body .left-text {
  width: 55vw;
  padding-top: 3rem;
  text-align: center;
  color: #FFFFFF;
  text-stroke: 2px #000000;
  position: absolute;
  left: 0;
  z-index: 2;
}

.body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
.bg-circle {
  position: absolute;
  top: -100vh;
  left: -110vh;
  height: 200vh;
  width: 220vh;
  border-radius: 100vh;
  background-color: #79bbff;
}
</style>